<template>
        <textarea :id="id" :value="value"></textarea>
</template>

<script>
    import request from '../../utils/request'
    import global from '../../utils/global'
    import uuid from 'uuid/v4'
    import fileApi from '../../api/file'
    // Import TinyMCE
    import tinymce from 'tinymce/tinymce';
    import 'tinymce/themes/modern/theme';
    import 'tinymce/plugins/paste';
    import 'tinymce/plugins/link';
    import 'tinymce/plugins/code';
    import 'tinymce/plugins/image';
    import 'tinymce/plugins/imagetools';

    const INIT = 0;
    const CHANGED = 2;
    var EDITOR = null;
    export default {
        props: {
            value: {
                type: String,
                required: true
            },
            setting: {}
        },
        watch: {
            value: function (val) {
                console.log('init ' + val)
                if (this.status == INIT || tinymce.activeEditor.getContent() != val){
                    tinymce.activeEditor.setContent(val);
                }
                this.status = CHANGED
            }
        },
        data: function () {
            return {
                status: INIT,
                id: 'editor-'+new Date().getTime(),
            }
        },
        methods: {

        },
        mounted: function () {
            const _this = this;
            const setting =
                {
                    language:"zh_CN",
                    selector:'#'+_this.id,
                    //插件
                    plugins:'image code imagetools',
                    init_instance_callback:function(editor) {
                        EDITOR = editor;
                        console.log("Editor: " + editor.id + " is now initialized.");
                        editor.on('input change undo redo', () => {
                            var content = editor.getContent()
                            _this.$emit('input', content);
                        });
                    },
                    //图片相关配置
                    images_upload_url: 'postAcceptor.php',
                    image_advtab: true,
                    //图片上传处理流程
                    images_upload_handler: function (blobInfo, success, failure) {
                        var file = blobInfo.blob()
                        var formData = new FormData()
                        var key = new Date().getTime() + uuid()
                        formData.append('file',file)
                        // 获取upToken
                        fileApi.getUpToken()
                            .then(function(data){
                                if (data.length<=0){
                                    failure()
                                    return;
                                }
                                var token = data;
                                //上传文件
                                fileApi.upload(formData,token,key,null)
                                    .then(function (data){
                                        console.log(data)
                                        if(data.key.length > 0){
                                            //上传成功 获取到key
                                            //将key转换为图片外链
                                            var url = fileApi.getDownloadURL(data.key)
                                            success(url);
                                            return
                                        }
                                        
                                    }) 
                            }).catch(function (params) {
                                failure()
                            })
                        formData.append('file',file)
                        
                    },
                    
                };
            Object.assign(setting,_this.setting)

            tinymce.init(setting);
        },
        beforeDestroy: function () {
            tinymce.get(this.id).destroy();
        }
    }

</script>

